<.simple_form
  :let={f}
  for={@changeset}
  action={@action}
  x-data="{ advancedMode: !!JSON.parse(localStorage.getItem('advancedMode')) }"
  x-init="$watch('advancedMode', value => localStorage.setItem('advancedMode', JSON.stringify(value)))"
>
  <.error :if={@changeset.action}>
    Oops, something went wrong! Please check the errors below.
  </.error>

  <section>
    <section class="flex justify-between items-center mt-4">
      <h3 class="text-2xl text-black dark:text-white">
        Notification Settings
      </h3>
      <span class="cursor-pointer hover:underline" x-on:click="advancedMode = !advancedMode">
        Editing Mode: <span x-text="advancedMode ? 'Advanced' : 'Standard'"></span>
      </span>
    </section>

    {live_render(
      @conn,
      Pinchflat.Settings.AppriseServerLive,
      session: %{"value" => f[:apprise_server].value}
    )}
  </section>

  <section class="mt-8">
    <section>
      <h3 class="text-2xl text-black dark:text-white">
        Indexing Settings
      </h3>

      <.input
        field={f[:youtube_api_key]}
        placeholder="ABC123"
        type="text"
        label="YouTube API Key"
        help={youtube_api_help()}
        html_help={true}
        inputclass="font-mono text-sm mr-4"
      />
    </section>
  </section>

  <section class="mt-8" x-show="advancedMode">
    <section>
      <h3 class="text-2xl text-black dark:text-white">
        Codec Options
      </h3>

      <p class="text-sm mt-2 max-w-prose">
        The best available codec will be used if your preferred codecs are not found
      </p>

      <.input
        field={f[:video_codec_preference]}
        placeholder="avc"
        type="text"
        label="Video Codec Preference"
        help="Video codec preference. Will be remuxed into an MP4 container. See below for more details"
        inputclass="font-mono text-sm mr-4"
      />

      <.input
        field={f[:audio_codec_preference]}
        placeholder="m4a"
        type="text"
        label="Audio Codec Preference"
        help="Audio codec preference. See below for more details"
        inputclass="font-mono text-sm mr-4"
      />
    </section>

    <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mt-5">
      <.codec_settings_help />
    </div>
  </section>

  <.button class="mt-10 mb-4 sm:mb-8 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>
</.simple_form>
